<template>
    <div class="detail-box">
        <div class="detail-cont">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/join' }">加入我们</el-breadcrumb-item>
                <el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card-job">
            <JobList :jobinfo="jobinfo" :style="{ width: '100%' }" />
        </div>
        <div class="content2">
            <h2>职位描述</h2>
            <div v-html="jobinfo.content"></div>
        </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
import JobList from './components/job-list.vue';
import { GetJobDetail } from '../../api/join'
import { ref } from 'vue';
const route = useRoute()
let { id, name } = route.query
const jobinfo = ref({})
GetJobDetail(id).then(res => {
    jobinfo.value = res.data.data
})
</script>

<style lang="scss" scoped>
.detail-box {
    padding-bottom: 2.7083rem;

    .detail-cont {
        height: .3125rem;
        background: #FFFFFF;
        padding-left: 1.3542rem;
        display: flex;
        align-items: center;
        margin-bottom: .1563rem;

        span {
            font-size: .0833rem;
            font-weight: 400;
            color: #666666;
        }
    }

    .card-job {
        padding: 0 0 .2083rem;
        width: 6.25rem;
        margin: auto;
    }

    div.content2 {
        width: 6.25rem;
        margin: auto;

        >h2 {
            font-size: .1667rem;
            font-weight: 400;
            color: #111111;
            margin-bottom: .1354rem;
        }


        >div {
            padding-left: .0521rem;
        }
    }
}
</style>

<style>
div.content2>div>p {
    font-size: .1042rem;
    font-weight: 400;
    color: #666666;
    line-height: .2083rem;
}
</style>